<template>
    <div class="description">
        <div class="section">
            <Row :gutter="20">
                <Col :span="12">
                    <div class="segment segment-1">
                        <div class="segment-title">SOC (%)</div>
                        <span class="segment-label">{{ description.soc | noDataFormat }}</span>
                    </div>
                </Col>
                <Col :span="12">
                    <div class="segment segment-2">
                        <div class="segment-title">SOH (%)</div>
                        <span class="segment-label">{{ description.soh | noDataFormat }}</span>
                    </div>
                </Col>
            </Row>
        </div>
        <div class="section">
            <Row :gutter="20">
                <Col :span="12">
                    <div class="segment segment-3">
                        <div class="segment-title">当日充电总量(千瓦时)</div>
                        <span class="segment-label">{{ description.cd | noDataFormat }}</span>
                    </div>
                </Col>
                <Col :span="12">
                    <div class="segment segment-4">
                        <div class="segment-title">当日放电总量(千瓦时)</div>
                        <span class="segment-label">{{ description.fd | noDataFormat }}</span>
                    </div>
                </Col>
            </Row>
        </div>
        <div class="section">
            <Row :gutter="20">
                <Col :span="12">
                    <div class="segment segment-7">
                        <div class="segment-title">累计充电量(千瓦)</div>
                        <span class="segment-label">{{ description.cdTotal | noDataFormat }}</span>
                    </div>
                </Col>
                <Col :span="12">
                    <div class="segment segment-8">
                        <div class="segment-title">累计放电量(千瓦时)</div>
                        <span class="segment-label">{{ description.fdTotal | noDataFormat }}</span>
                    </div>
                </Col>
            </Row>
        </div>
        <div class="section">
            <Row :gutter="20">
                <Col :span="24">
                    <div class="segment segment-6">
                        <div class="segment-title">装机总容量(千瓦)</div>
                        <span class="segment-label">{{ description.capacity | noDataFormat }}</span>
                    </div>
                </Col>
            </Row>
        </div>

    </div>
</template>

<script>
export default {
    name: "description",
    props: {
        description: {}
    },
    data() {
        return {};
    },
    computed: {},
    created() {
    },
    mounted() {
    },
    watch: {},
    methods: {},
    components: {}
};
</script>

<style scoped lang="scss">
    .section + .section {
        margin-top: 28px;
    }

    .segment {
        padding-left: 80px;
        position: relative;
    }

    .segment::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
        width: 60px;
        height: 60px;
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .segment::after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
        width: 60px;
        height: 60px;
        background-position: center;
        background-size: auto;
        background-repeat: no-repeat;
    }

    .segment.segment-1::before {
        background-image: url("../../../../assets/img/storePower/6.png");
    }

    .segment.segment-2::before {
        background-image: url("../../../../assets/img/storePower/7.png");
    }

    .segment.segment-3::before {
        background-image: url("../../../../assets/img/storePower/8.png");
    }

    .segment.segment-4::before {
        background-image: url("../../../../assets/img/storePower/9.png");
    }

    .segment.segment-5::before {
        background-image: url("../../../../assets/img/storePower/10.png");
    }

    .segment.segment-6::before {
        background-image: url("../../../../assets/img/storePower/11.png");
    }

    .segment.segment-7::before {
        background-image: url("../../../../assets/img/storePower/12.png");
    }

    .segment.segment-8::before {
        background-image: url("../../../../assets/img/storePower/13.png");
    }

    .segment-title {
        font-size: 14px;
        color: #333;
        line-height: 24px;
    }

    .segment-label {
        font-size: 24px;
        color: #333;
    }
</style>
